/* Blauw #627AF5 Paars #9362F5 Rood #F5627A Oranje #F28E4F */

* {
  box-sizing : border-box;
}

body {
  background-color : #0B0B0B;
  font-family      : 'Source Sans Pro',
                     sans-serif;
}

section {
  width      : 100%;
  max-width  : 1500px;
  height     : 100%;
  text-align : center;
}

h1 {
  margin      : 20px;
  color       : #627AF5;
  font-size   : 2em;
  font-weight : bold;
}

button {
  width            : 150px;
  height           : 50px;
  margin           : 5px;
  padding          : 0;
  color            : white;
  border           : 1px solid rgb(98, 165, 245);
  border-radius    : 5px;
  background       : none;
  background-color : none;
  outline          : inherit;
  font             : inherit;
  cursor           : pointer;

  -moz-transition    : background-color 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  -o-transition      : background-color 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  -webkit-transition : background-color 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  transition         : background-color 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
}
button:hover{
  background-color : rgb(82, 82, 219);
}

p {
  color     : #dbdbdb;
  font-size : 1.20em;
  /* text-align : left; */
}

.countryHolder {
  width  : 100%;
  height : auto;
  float  : left;
}

.listCountry {
  width  : calc(33% - 20px);
  height : 100%;
  float  : left;
  margin : 10px;
  /* background-color: orange; */
}

.listCountry img {
  width  : 100%;
  height : auto;
}

.play {
  width             : 25px;
  height            : 25px;
  float             : left;
  background-image  : url("../img/play.svg");
  background-repeat : no-repeat;
}

.progressHolder {
  display         : flex;
  align-items     : center;
  flex-direction  : column;
  justify-content : center;
}

.progressBarHolder {
  width  : 70%;
  margin : 0 auto;
}

.progressBar {
  width            : calc(100% - 25px);
  height           : 25px;
  float            : left;
  background-color : #505050;
}

.progressBar span {
  width              : 85%;
  height             : 25px;
  float              : left;
  background-color   : #727272;
  font-weight        : bold;
  -moz-transition    : all 500ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  -o-transition      : all 500ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  -webkit-transition : all 500ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  transition         : all 500ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  /* custom */
}

.progressBar span p {
  float       : right;
  margin      : 0 15px;
  color       : white;
  line-height : 25px;
}

.progressBar img {
  width  : 25px;
  height : 25px;
  float  : left;
  margin : 0 0 0 -10px;
}

.summary {
  width      : 100%;
  height     : auto;
  float      : left;
  margin     : 15px;
  text-align : center;
}

.summary h2 {
  margin-bottom : 10px;
  color         : #9362F5;
  font-size     : 2rem;
  font-weight   : bold;
  /**
  * text-align
  *
  *
  *
  * : left;
  */
}
.summaryText {
  max-width: 750px;
  margin: 0 auto;
}
